<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./resources/templates/appTemplate.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <ui:define name="firstname">
        <f:view>
            <h:outputText value="#{userSession.user.firstname}"/>
        </f:view>
    </ui:define>
    <ui:define name="lastname">
        <f:view>
            <h:outputText value="#{userSession.user.lastname}"/>
        </f:view>
    </ui:define>
    <ui:define name="email">
        <f:view>
            <h:outputText value="#{userSession.user.email}"/>
        </f:view>
    </ui:define>
    <ui:define name="content">
        <f:view>
            <script type="text/javascript"> 
                //<![CDATA[ 
                this.onload = function() {
                    $("#userID").css("display", "none");
                    $("#userID").fadeIn('slow');
                }
                //]]> 
            </script> 
            <h:form id="albumListForm" rendered="#{userSession.connected}">
                <p:contextMenu id="albumListContextMenu" for="albums" style="width: 280px;">
                    <p:menuitem value="Informations" ajax="true" update=":albumDetailForm:albumDetail" icon="ui-icon-search" oncomplete="albumDetailDialog.show()"/>
                </p:contextMenu>
                <h1><h:outputText value="Les albums"/></h1>
                <p:commandButton icon="ui-icon-play" onclick="togglePlay();" value="Lire"/>
                <!--<p:commandButton icon="ui-icon-disk" onclick="savePlaylist();" value="Enregistrer playlist courante"/> -->
                <p:commandButton icon="ui-icon-refresh" onclick="reinit();" value="Réinitialiser lecteur"/>
                <p:dataTable id="albums" value="#{albumList.getAllAlbums()}" var="album" paginator="true" rows="25" widgetVar="albumsTable"
                             emptyMessage="Aucun album trouvé !" 
                             paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} Aller à la page {JumpToPageDropdown}" 
                             rowsPerPageTemplate="25, 50, 100"
                             rowKey="#{album.id}" selection="#{albumList.album}" selectionMode="single">
                    <p:ajax event="rowSelect" update=":albumListForm:albumListContextMenu" />
                    <p:ajax event="rowUnselect" update=":albumListForm:albumListContextMenu" />
                    <f:facet name="header">  
                        <p:outputPanel>  
                            <h:outputText value="Recherche sur toutes les colonnes : " />  
                            <p:inputText id="globalFilter" onkeyup="albumsTable.filter()" style="width:150px" />  
                        </p:outputPanel>  
                    </f:facet>
                    <p:column style="width:2%">  
                        <p:rowToggler />  
                    </p:column>  
                    <p:column style="width:5%;">
                        <p:commandButton icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playAlbum(#{album.id}, '#{songList.addSlashes(album.JSon)}');"/>
                    </p:column>
                    <p:column sortBy="#{album.title}" filterBy="#{album.title}">
                        <f:facet name="header">
                            <h:outputText value="Titre"/><br/>
                        </f:facet>
                        <h:outputText value="#{album.title}"/>
                    </p:column>
                    <p:column sortBy="#{album.artist.artistName}" filterBy="#{album.artist.artistName}">
                        <f:facet name="header">
                            <h:outputText value="Artiste"/><br/>
                        </f:facet>
                        <h:outputText value="#{album.artist.artistName}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Date de sortie"/><br/>
                        </f:facet>
                        <h:outputText value="#{album.releaseDate}">
                            <f:convertDateTime pattern="dd/MM/yyyy" />
                        </h:outputText>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Nb lectures"/><br/>
                        </f:facet>
                        <h:outputText value="#{album.nbTimesPlayed}"/>
                    </p:column>
                    <f:facet name="footer">  
                        Total : #{fn:length(albumList.getAllAlbums())} titres.  
                    </f:facet> 

                    <p:rowExpansion>  
                        <h:panelGrid id="display" columns="2" cellpadding="4" style="width:300px;"  
                                     styleClass=" ui-widget-content grid">  
                            <f:facet name="header">  
                                <p:graphicImage style="width: 150px;" value="#{albumList.album.coverImage}"/>  
                            </f:facet>  
                            <h:outputText value="Titre : " />  
                            <h:outputText id="model" value="#{albumList.album.title}" />  
                            <h:outputText value="Artiste : " />  
                            <h:outputText id="year" value="#{albumList.album.artist.artistName}" />  
                            <h:outputText value="Date de sortie : " />  
                            <h:outputText value="#{albumList.album.releaseDate}">
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </h:outputText>
                            <h:outputText value="Nombre de lectures : " />  
                            <h:outputText value="#{albumList.album.nbTimesPlayed}"/>  
                            <h:outputText value="Genres :" />  
                            <ui:repeat value="#{albumList.album.genres}" var="genre" varStatus="loopGenres">
                                <h:outputText value="#{genre.label}"/>
                                <h:outputText rendered="#{loopGenres.index ge 0 and loopGenres.index lt albumList.album.genres.size() - 1}" value=", "/>
                            </ui:repeat>
                        </h:panelGrid>  
                        <table id="albumSongTable">
                            <thead>
                                <th></th>
                                <th></th>
                                <th>Titre</th>
                                <th>Durée</th>
                                <th>Joué</th>
                            </thead>
                            <ui:repeat value="#{albumList.album.musics}" var="song" varStatus="loop">
                                <tr>
                                    <td><h:graphicImage width="50" library="images" value="#{song.coverImage}" /></td>
                                    <td><p:commandButton icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playSongFromPlayList(#{song.id}, #{loop.index}, '#{songList.addSlashes(albumList.album.JSon)}');"/></td>
                                    <td><h:outputText value="#{song.title}"/></td>
                                    <td><h:outputText value="#{song.totalTimeStr}"/></td>
                                    <td><h:outputText value="#{song.nbTimesPlayed} fois"/></td>
                                </tr>
                            </ui:repeat>
                        </table>
                    </p:rowExpansion>  

                </p:dataTable>
            </h:form>

            <h:form id="albumDetailForm">
                <p:dialog header="#{albumList.album.title}" widgetVar="albumDetailDialog" resizable="false"  
                          width="800" height="400" showEffect="clip" hideEffect="fold" id="albumDetail">  
                    <p:commandButton icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playPlaylist('#{songList.addSlashes(albumList.album.JSon)}');"/>

                    <h:panelGrid id="displayAlbumGrid" columns="2" cellpadding="4" style="width:300px;"  
                                     styleClass=" ui-widget-content grid">  
                            <f:facet name="header">  
                                <p:graphicImage style="width: 150px;" value="#{albumList.album.coverImage}"/>  
                            </f:facet>  
                            <h:outputText value="Titre : " />  
                            <h:outputText id="model" value="#{albumList.album.title}" />  
                            <h:outputText value="Artiste : " />  
                            <h:outputText id="year" value="#{albumList.album.artist.artistName}" />  
                            <h:outputText value="Date de sortie : " />  
                            <h:outputText value="#{albumList.album.releaseDate}">
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </h:outputText>
                            <h:outputText value="Nombre de lectures : " />  
                            <h:outputText value="#{albumList.album.nbTimesPlayed}"/>  
                            <h:outputText value="Genres :" />  
                            <ui:repeat value="#{albumList.album.genres}" var="genre" varStatus="loopGenres">
                                <h:outputText value="#{genre.label}"/>
                                <h:outputText rendered="#{loopGenres.index ge 0 and loopGenres.index lt albumList.album.genres.size() - 1}" value=", "/>
                            </ui:repeat>
                        </h:panelGrid>  
                    <table id="albumSongTable">
                        <thead>
                            <th></th>
                            <th></th>
                            <th>Titre</th>
                            <th>Durée</th>
                            <th>Joué</th>
                        </thead>
                        <ui:repeat value="#{albumList.album.musics}" var="song" varStatus="loop">
                            <tr>
                                <td><h:graphicImage width="50" library="images" value="#{song.coverImage}" /></td>
                                <td><p:commandButton icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playSongFromPlayList(#{song.id}, #{loop.index}, '#{songList.addSlashes(albumList.album.JSon)}');"/></td>
                                <td><h:outputText value="#{song.title}"/></td>
                                <td><h:outputText value="#{song.totalTimeStr}"/></td>
                                <td><h:outputText value="#{song.nbTimesPlayed} fois"/></td>
                            </tr>
                        </ui:repeat>
                    </table>
                </p:dialog>
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>
